<template>
  <div class="td-box" ref="can"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import editStore from "@/store/editStore";
import { getAssetsFile } from "@/utils/index.js";

let can = ref();
let render = "";
let scene = new THREE.Scene();
scene.background = new THREE.Color("rgb(214, 220, 242)");

let camera = new THREE.PerspectiveCamera(30, 1, 1, 5000);
camera.lookAt(0, 0, 0);
camera.position.set(0, 0, 2000);

let AmbientLight = new THREE.AmbientLight("#fff", 1);
scene.add(AmbientLight);

// let mesh = new THREE.Mesh(geometry, Material1);
// mesh.position.set(0, 0, 0);

// scene.add(mesh);
let left = createPlaneGeometry(
  {
    length: 100,
    width: 400,
  },
  {
    x: -250,
    y: 0,
    z: 0,
  },
  "#f00"
);

// left.position.set(-200, 0, 50);
// left.rotateY(Math.PI / 2);
// const axis = new THREE.Vector3(0, 1, 0); //向量axis
// left.rotateOnAxis(axis, Math.PI / 2); //绕axis轴旋转π/8
scene.add(left);
console.log(left.position, "delppp", left.rotation);
let down = createPlaneGeometry(
  {
    length: 400,
    width: 400,
  },
  {
    x: 0,
    y: 0,
    z: 0,
  },
  "#0f0"
);
scene.add(down);
let right = createPlaneGeometry(
  {
    length: 100,
    width: 400,
  },
  {
    x: 250,
    y: 0,
    z: 0,
  },
  "#00f"
);

// right.position.set(200, 0, 50);
// right.rotateY(Math.PI / 2);

scene.add(right);
let up = createPlaneGeometry(
  {
    length: 400,
    width: 400,
  },
  {
    x: 500,
    y: 0,
    z: 0,
  },
  "#ff0"
);

// up.position.set(200, 0, 300);
// up.rotateY(Math.PI / 2);
scene.add(up);

let back = createPlaneGeometry(
  {
    length: 400,
    width: 100,
  },
  {
    x: 0,
    y: 250,
    z: 0,
  },
  "#0ff"
);

// back.position.set(0, 200, 50);
// back.rotateX(Math.PI / 2);

scene.add(back);
let front = createPlaneGeometry(
  {
    length: 400,
    width: 100,
  },
  {
    x: 0,
    y: -250,
    z: 0,
  }
);
// front.position.set(0, -200, 50);
// front.rotateX(Math.PI / 2);
scene.add(front);

// let wrapper = new THREE.Object3D();
// wrapper.position.set(0, 0, 100);
// wrapper.add(up);
// up.position.set(0, 0, 0);
// wrapper.rotateY(Math.PI / 2);

// scene.add(wrapper);

function createPlaneGeometry(size, position, color = "#904d15") {
  let label = new THREE.PlaneGeometry(size.length, size.width);
  let Material1 = new THREE.MeshBasicMaterial({
    color: color,
    side: THREE.DoubleSide,
  });
  let lmesh = new THREE.Mesh(label, Material1);

  lmesh.position.set(position.x, position.y, position.z);
  // lmesh.rotation.set(Math.PI / 2, 0, 0);
  return lmesh;
}

let axes = new THREE.AxesHelper(500);
scene.add(axes);

function ani() {
  left.name = "Box";
  const times = [0, 3]; //时间轴上，设置三个时刻0、3、6秒
  // times中三个不同时间点，物体分别对应values中的三个xyz坐标
  const pvalues = [-250, 0, 0, -200, 0, 50];
  let rvalues = [new THREE.Euler(0, 0, 0), new THREE.Euler(0, Math.PI / 2, 0)];
  // 创建关键帧，把模型位置和时间对应起来
  // 0~3秒，物体从(0,0,0)逐渐移动到(100,0,0),3~6秒逐渐从(100,0,0)移动到(0,0,100)
  const posKF = new THREE.KeyframeTrack("Box.position", times, pvalues);
  const rKF = new THREE.KeyframeTrack("Box.rotation", times, rvalues);

  const clip = new THREE.AnimationClip("test", 3, [posKF, rKF]);
  const mixer = new THREE.AnimationMixer(left);
  const clipAction = mixer.clipAction(clip);
  //.play()控制动画播放，默认循环播放

  let clock = new THREE.Clock();
  function loop() {
    requestAnimationFrame(loop);
    const frameT = clock.getDelta();
    // 更新播放器相关的时间
    mixer.update(frameT);
    render.render(scene, camera);
  }
  loop();
  clipAction.play();
}

onMounted(() => {
  render = new THREE.WebGLRenderer({
    antialias: true,
  });
  render.setSize(can.value.offsetWidth, can.value.offsetHeight);
  render.setPixelRatio(window.devicePixelRatio);

  let controls = new OrbitControls(camera, render.domElement);
  controls.addEventListener("change", () => {
    render.render(scene, camera);
  });
  can.value.appendChild(render.domElement);
  render.render(scene, camera);

  ani();
});
</script>
<style scoped lang="scss">
.td-box {
  width: 100%;
  height: 100%;
}
</style>
